<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #div1{
      width:400px;
      height:400px;
      background:white;
    }
    body{
      margin:0;
      background: black;
    }
  </style>
</head>
<body>
<div id="div1">
  <svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  </svg>
</div>
<script src="https://cdn.bootcss.com/jquery/1.2.3/jquery.min.js"></script>
<script>
  console.log("$:",$)
  const svgNS = 'http://www.w3.org/2000/svg';
  const oParent = document.getElementById('div1');
  const oSvg = document.getElementById('svg1');
  const abPath = document.getElementsByTagName('path');

  function createTag(tag, objAttr){
    const oTag = document.createElementNS(svgNS, tag);
    for(let attr in objAttr){
      oTag.setAttribute(attr, objAttr[attr]);
    }
    return oTag;
  }

  const arrNum = [23.61, 17.10, 16.05, 15.40, 11.75, 14.95];
  const angle = 360;
  const outerR = 120;
  const innerR = 70;
  const centerX = 200;
  const centerY = 200;
  const arrColor = ['red', 'blue', 'yellow', 'green', 'black', 'gray'];

  for (let i = 0; i < arrNum.length; ++i) {
    const oPath = createTag('path', {fill: arrColor[i]});

    oSvg.appendChild(oPath);
  }

  $('#div1').animate({
    move: 'auto'
  }, {
    duration: 700,
    easing: 'swing',
    step: function (a, b) {
      /** b.pos 从0 到 1的比例值*/
      let sumNum = 0;
      const outerXY = [{x: 320, y: 200}];
      const innerXY = [{x: 270, y: 200}];

      for (let i = 0; i < arrNum.length; ++i) {
        sumNum += arrNum[i] / 100 * angle;

        if (i === arrNum.length - 1) {
          sumNum = 360;
        }

        const outerX = Math.cos(sumNum * b.pos * Math.PI / 180) * outerR + centerX;
        const outerY = Math.sin(sumNum * b.pos * Math.PI / 180) * outerR + centerY;
        outerXY.push({x: outerX, y: outerY});

        const innerX = Math.cos(sumNum * b.pos * Math.PI / 180) * innerR + centerX;
        const innerY = Math.sin(sumNum * b.pos * Math.PI / 180) * innerR + centerY;
        innerXY.push({x: innerX, y: innerY});
      }

      for (let i = 0; i < outerXY.length; ++i) {
        if (i === outerXY.length - 1) {
          break;
        }
        const oPath = createTag('path', {
          fill: arrColor[i],
          d: `M${outerXY[i].x} ${outerXY[i].y} A ${outerR} ${outerR} 0 0 1 ${outerXY[i + 1].x} ${outerXY[i + 1].y} L ${innerXY[i + 1].x} ${innerXY[i + 1].y} A ${innerR} ${innerR} 0 0 0 ${innerXY[i].x} ${innerXY[i].y}`
        });
        oSvg.appendChild(oPath);
      }
    }
  });


  oParent.appendChild(oSvg)
</script>
</body>
</html>
